import React from 'react';
import ReactDOM from 'react-dom';

import './MatchInfo.css';
import MatchInfo_bg from './assets/比赛信息栏bg.svg';
import Legend_bg from './assets/组 7.svg';

class MatchInfo extends React.Component {
	constructor(props){
		super(props);
		this.state = {
			Team1:'Team1',
			Team2:'Team2',
			Score:'0 : 0',
			MatchDate:'2018 -- --',
			wyId:null
		}
	}
	clickLeft(){
		this.setState({
			Team1:'France',
			Team2:'Belgium',
			Score:'1 : 0',
			MatchDate:'2018.7.10',
			wyId:'2058014'
		});
		document.getElementById('赛程表').style.display = 'none';
		document.getElementById('MatchInfo-Buttons').style.display = 'none';
		document.getElementById('MainFootballField_主客场中心视图').style.display = 'block';
		document.getElementById('主场球队Cluster视图列表').style.display = 'block';
		document.getElementById('客场球队Cluster视图列表').style.display = 'block';
		document.getElementById('RankedByShots').style.display = 'block';
	}
	clickRight(){
		this.setState({
			Team1:'Croatia',
			Team2:'England',
			Score:'2 : 1',
			MatchDate:'2018.7.11',
			wyId:'2058015'
		});
		document.getElementById('赛程表').style.display = 'none';
		document.getElementById('MatchInfo-Buttons').style.display = 'none';
		document.getElementById('MainFootballField_主客场中心视图').style.display = 'block';
		document.getElementById('主场球队Cluster视图列表').style.display = 'block';
		document.getElementById('客场球队Cluster视图列表').style.display = 'block';
		document.getElementById('RankedByShots').style.display = 'block';
	}
	clickUp(){
		this.setState({
			Team1:'France',
			Team2:'Croatia',
			Score:'4 : 2',
			MatchDate:'2018.7.15',
			wyId:'2058017'
		});
		document.getElementById('赛程表').style.display = 'none';
		document.getElementById('MatchInfo-Buttons').style.display = 'none';
		document.getElementById('MainFootballField_主客场中心视图').style.display = 'block';
		document.getElementById('主场球队Cluster视图列表').style.display = 'block';
		document.getElementById('客场球队Cluster视图列表').style.display = 'block';
		document.getElementById('RankedByShots').style.display = 'block';
	}
	clickDown(){
		this.setState({
			Team1:'Belgium',
			Team2:'England',
			Score:'2 : 0',
			MatchDate:'2018.7.14',
			wyId:'2058016'
		});
		document.getElementById('赛程表').style.display = 'none';
		document.getElementById('MatchInfo-Buttons').style.display = 'none';
		document.getElementById('MainFootballField_主客场中心视图').style.display = 'block';
		document.getElementById('主场球队Cluster视图列表').style.display = 'block';
		document.getElementById('客场球队Cluster视图列表').style.display = 'block';
		document.getElementById('RankedByShots').style.display = 'block';
	}


	render(){
		return(
			<div className='MatchInfo_bg'>
				<img src={MatchInfo_bg}></img>
				<text className='MatchInfo-team1'>{this.state.Team1}</text>
				<text className='MatchInfo-team2'>{this.state.Team2}</text>
				<text className='MatchInfo-score'>Score: {this.state.Score}</text>
				<text className='MatchInfo-date'>Match date: {this.state.MatchDate}</text>

				<div id='MatchInfo-Buttons'>
					<div className='MatchInfo-leftbutton font2 bigger2' onClick = {() => this.clickLeft()}>
						<text style={{marginTop:'9px',fontSize:'10px'}}>1 / 2 Final </text>
						<text style={{marginTop:'9px'}}>法国 - 比利时</text>
					</div>
					<div className='MatchInfo-rightbutton font2 bigger2' onClick = {() => this.clickRight()}>
						<text style={{marginTop:'9px',fontSize:'10px'}}>1 / 2 Final </text>
						<text style={{marginTop:'9px'}}>克罗地亚 - 英格兰</text>
					</div>
					<div className='MatchInfo-upbutton font2 bigger2' onClick = {() => this.clickUp()}>
						<text style={{marginTop:'9px',fontSize:'10px'}}> Final </text>
						<text style={{marginTop:'9px'}}>法国 - 克罗地亚</text>
					</div>
					<div className='MatchInfo-downbutton font2 bigger2' onClick = {() => this.clickDown()}>
						<text style={{marginTop:'9px',fontSize:'10px'}}>Bronze Final </text>
						<text style={{marginTop:'9px'}}>比利时 - 英格兰</text>
					</div>
				</div>

				<text className='MatchInfo-topTitle-team1'>{this.state.Team1}</text>
				<text className='MatchInfo-topTitle-team2'>{this.state.Team2}</text>

				<text className='UserControl-team1'>{this.state.Team1}</text>
				<text className='UserControl-team2'>{this.state.Team2}</text>
				<text className='UserControl-team1-1'>{this.state.Team1}</text>
				<text className='UserControl-team2-1'>{this.state.Team2}</text>

				<img src={Legend_bg} style={{position:'absolute',top:'458px',left:'17px'}}></img>
			</div>
			)
	}
}

export default MatchInfo;